<template>
    <div>
        <el-input v-model="vo.name" placeholder="学生姓名" style="width:223px"></el-input>
          <el-date-picker
      v-model="vo.todatebegin"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    到
           <el-date-picker
      v-model="vo.todateend"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

     <el-button type="primary" v-on:click="search()">查询</el-button>
      <el-button type="primary" v-on:click="add">添加</el-button>
      <el-button type="primary" v-on:click="deleteall()">批量删除</el-button>
      

       <el-table
    :data="tableData"
    border
    style="width: 100%" @selection-change="selectchange">
     <el-table-column
      type="selection"
      prop="id"
      label="主键"
      width="150">
    </el-table-column>

     <el-table-column
      fixed
      prop="id"
      label="主键"
      width="150">
    </el-table-column>

   <el-table-column
      prop="cid"
      label="课程id"
      width="150">
    </el-table-column>
      <el-table-column
      prop="bjname"
      label="课程"
      width="150">
    </el-table-column>
    

    <el-table-column
      prop="bid"
      label="所属班级"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="120">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="手机"
      width="120">
    </el-table-column>
    <el-table-column
      prop="cname"
      label="选修课程"
      width="300">
    </el-table-column>
    <el-table-column
      prop="todate"
      label="到校时间"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handledelete(scope.row)" type="text" size="small">删除</el-button>
        <el-button  @click="handleedit(scope.row)" type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
  :page-size="pageSize"
  :current-page="cp"
  @current-change="changePage"
  layout="prev, pager, next"
  :total="totalSize">
</el-pagination>


  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">


    <el-form-item label="主键" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="性别" :label-width="formLabelWidth">
        <template>
        <el-radio v-model="form.sex" label="1">男</el-radio>
        <el-radio v-model="form.sex" label="2">女</el-radio>
        </template>
    </el-form-item>

    <el-form-item label="手机号码" :label-width="formLabelWidth">
      <el-input v-model="form.mobile" autocomplete="off"></el-input>
    </el-form-item>
 <el-form-item label="手机号码" :label-width="formLabelWidth">
      到校日期:
      <el-date-picker
      v-model="form.todate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

    </el-form-item>

    <el-form-item label="班级" :label-width="formLabelWidth">
      <el-select v-model="form.bid" placeholder="请选择班级">
        <el-option label="2021a" value="1"></el-option>
        <el-option label="2021b" value="2"></el-option>
        <el-option label="1903b" value="3"></el-option>
        <el-option label="1904b" value="4"></el-option>
        
      </el-select>
    </el-form-item>

       <el-form-item label="科目" :label-width="formLabelWidth">

       <el-checkbox-group v-model="form.cid">
      <el-checkbox label="1" name="cid">英语</el-checkbox>
      <el-checkbox label="2" name="cid">数学</el-checkbox>
      <el-checkbox label="3" name="cid">语文</el-checkbox>
      <el-checkbox label="4" name="cid">体育</el-checkbox>
    </el-checkbox-group>

    </el-form-item>






  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="savemonth()">确 定</el-button>
  </div>
</el-dialog>






    </div>
</template>

<script>

import axios from 'axios'; //讲前后端链接框架导入
import About from './About.vue'
export default {
    //进行页面初始化的时候加载数据过来
    created() {
        this.search(1);
    },
    //方法脚本块 
    methods: {
      //多选的按钮将多选点值传递给后台
      selectchange(vae){
        this.delRows = vae ;
        alert(this.delRows);
      },
      //批量删除
      deleteall(){
        alert("1");
        let ids = this.delRows.map(x=>x.id);
        alert("2");
        axios.post("http://localhost:8089/tstudent/deleteall",ids)
        .then(res=>{
          alert("批量删除成功！");
          this.search();
          alert("3");
        })
        alert("4");

      },
        changePage(cp){
            this.cp =cp ;
          alert(cp);
          alert("改变阐述");

          this.search(this.cp);
        },
        savemonth(){
             
              let rowkey = this.form.id ;
              alert(rowkey);
            if(rowkey != null ){

              axios.put("http://localhost:8089/tstudent", this.form)
               .then(res=>{
                let result =  res.data.flag ;
                 alert("修改成功");
                 //动态查询数据
                 this.search();
                 this.dialogFormVisible = false ;
               })
               
            }
            else
            {
              axios.post("http://localhost:8089/tstudent/addStudent", this.form)
              .then(res=>{
                 let result =  res.data.flag ;
                 alert("保存成功");
                 //动态查询数据
                 this.search();
                 this.dialogFormVisible = false ;

              })
               
            }


        

        },
        //编辑
        handleedit(row){
            this.form = row ;
            let cidnw = row.cid ;
            let kk = cidnw.split(",");
            this.form.cid = kk;
            this.dialogFormVisible = true ;

        },
        //单个删除
        handledelete(row ){
          let id = row.id ;
          alert("确定删除吗？");
          axios.delete("http://localhost:8089/tstudent/"+ id )
          .then(res=>{
               alert("删除成功！");
               this.search();
          })
          

        },
        search(cp=1 ){
            this.cp = cp ;
            axios.post("http://localhost:8089/tstudent/search/"+this.cp+"/"+this.pageSize,this.vo)
            .then(rep=>{
                this.tableData = rep.data.rows;
                this.totalSize = rep.data.total;

            })
            alert("查询");


        },
        add(){
            this.form.id = null ;
            alert("添加") ;
            this.dialogFormVisible = true ;
        }
        
    },
    //数据初始值

    data() {
    return {
     //查询
      vo: {},
       //展示页面数据，将来从后台过来
       tableData: [], 
         //添加修改的数据初始化值
         form: {
          name: '',
          sex: '',
          mobile: '',
          bid: '',
          todate: '',
          cid: [],
          id:0
        },
        dialogFormVisible:false,
        formLabelWidth:'120px',
        cp:1,
        totalSize:10,
        pageSize:2,
        delRows:[]

    }
  }
}
</script>